<script setup lang="tsx">
import { fetchGetLogtList } from '@/service/api';
import { useAppStore } from '@/store/modules/app';
import { useTable } from '@/hooks/common/table';
import DictSearch from './modules/dict-search.vue';

const appStore = useAppStore();

const { columns, data, getDataByPage, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
  apiFn: fetchGetLogtList,
  showTotal: true,
  apiParams: {
    current: 1,
    size: 10,
    module: null,
    type: null,
    content: null
  },
  columns: () => [
    {
      type: 'selection',
      align: 'center',
      width: 48
    },
    {
      key: 'index',
      title: '序号',
      align: 'center',
      width: 64
    },
    {
      key: 'module',
      title: '操作模块',
      align: 'center',
      width: 100
    },
    {
      key: 'type',
      title: '操作类型',
      align: 'center',
      width: 120
    },
    {
      key: 'content',
      title: '操作内容',
      align: 'center',
      width: 200
    },
    {
      key: 'operator',
      title: '操作人',
      align: 'center',
      width: 200
    },
    {
      key: 'operateTime',
      title: '操作时间',
      align: 'center',
      width: 200
    }
  ]
});
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <DictSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
    <NCard title="日志列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <NDataTable
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="962"
        :loading="loading"
        remote
        :row-key="row => row.id"
        :pagination="mobilePagination"
        class="sm:h-full"
      />
    </NCard>
  </div>
</template>

<style scoped></style>
